<!DOCTYPE html>
<html xmlns:font-weight="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>狼窝窝问答页面</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover">
    <meta name="copyright" content="Copyright (c) 2006-2018 Luowogwo.">
    <meta name="format-detection" content="telephone=no,address=no">
    <meta name="referrer" content="always">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="no">
    <link href="/css/question/mobile+css+head_mobile+css+ui.css"
          rel="stylesheet" type="text/css">
    <link href="/css/question/new_ask2016.css" rel="stylesheet" type="text/css">

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <link href="/js/replyComment/dist/dialog.css" rel="stylesheet">
    <script src="/js/replyComment/dist/mDialogMin.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>

<script>
    $(function () {
        var params = getParams();
        if (params.id) {
            //回显具体的问题
            $.get(baseUrl + "/questions/" + params.id, function (data) {
                $("#question").renderValues(data);
                $(".replyBtn").attr("href", "/mine/reply.html?id=" + params.id);
            });
        }
        //---------------------------收藏操作-------------------------
        //先回显收藏
        $.get(baseUrl + "/questions/" + params.id + "/questionCollections/", function (data) {
            if (data.success) {//如果是有关注的
                $("#collectionBtn").css("color", "red");
                $("#collection").css("color", "red");
                $("#collection").html("已收藏");
            } else {
                $("#collectionBtn").css("color", "black");
                $("#collection").css("color", "black");
                $("#collection").html("收藏");
            }
        });
        //收藏按钮操作
        $("#collectionBtn").click(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            //判断是否已经登录,如果没有登录则执行if代码块
            if (user == null) {
                $("#collectionBtn").css("color", "black");
                $(document).dialog({
                    type: 'confirm',
                    closeBtnShow: true,
                    content: '请登陆后再执行相关操作!',
                    onClickConfirmBtn: function () {
                        window.location.href = "/login.html";
                    }
                });
                return;
            }
            var temp = $("#collectionBtn").css("color");
            if ("rgb(0, 0, 0)" == temp) {//按钮黑色
                //点击事件 收藏文章
                $.ajax({
                    url: baseUrl + "/questions/" + params.id + "/questionCollections/",//保存关系
                    method: "POST",
                });
                $("#collectionBtn").css("color", "red");
                $("#collection").css("color", "red");
                $("#collection").html("已收藏");
            } else {//按钮红色,取消收藏
                //删除数据库数据
                $.ajax({
                    url: baseUrl + "/questions/" + params.id + "/questionCollections/",
                    method: "DELETE"
                });
                $("#collectionBtn").css("color", "black");
                $("#collection").css("color", "black");
                $("#collection").html("收藏");
            }
        });
        //---------------------------关注操作-------------------------
        //先回显关注
        $.get(baseUrl + "/questions/" + params.id + "/questionFollows/", function (data) {
            if (data.success) {//如果是有关注的
                $("#followBtn").css("color", "red");
                $("#follow").css("color", "red");
                $("#follow").html("已关注");
            } else {
                $("#followBtn").css("color", "black");
                $("#follow").css("color", "black");
                $("#follow").html("关注");
            }
        });
        //关注按钮操作
        $("#followBtn").click(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            //判断是否已经登录,如果没有登录则执行if代码块
            if (user == null) {
                $("#followBtn").css("color", "black");
                $(document).dialog({
                    type: 'confirm',
                    closeBtnShow: true,
                    content: '请登陆后再执行相关操作!',
                    onClickConfirmBtn: function () {
                        window.location.href = "/login.html";
                    }
                });
                return;
            }
            var temp = $("#followBtn").css("color");
            if ("rgb(0, 0, 0)" == temp) {//按钮黑色
                //点击事件 关注问题
                $.ajax({
                    url: baseUrl + "/questions/" + params.id + "/questionFollows/",//保存关系
                    method: "POST",
                });
                $("#followBtn").css("color", "red");
                $("#follow").css("color", "red");
                $("#follow").html("已关注");
            } else {//按钮红色,取消关注
                //删除数据库数据
                $.ajax({
                    url: baseUrl + "/questions/" + params.id + "/questionFollows/",
                    method: "DELETE"
                });
                $("#followBtn").css("color", "black");
                $("#follow").css("color", "black");
                $("#follow").html("关注");
            }
        });


        //根据问题id查询回答列表
        //当前页
        var currentPage = 1;
        //总页数
        var pages;
        //声明一个用于存储问题的容器
        var replyArr = [];

        function query() {
            //查询问题id对应的回答列表
            $.get(baseUrl + "/questions/" + params.id + "/questionReplies", {currentPage: currentPage}, function (data) {
                //把第二个数组合并第一个数组中
                $.merge(replyArr, data.list);
                var json = {
                    list: replyArr
                };
                //渲染数据
                $("#reply").renderValues(json, {
                    getHref: getHref
                });
                //获取总页数
                pages = data.pages;

                //点击回复按钮弹出回复框
                /*$(".fa").click(function () {
                    console.log(1);
                    Dialog.init('<input type="text" placeholder="请输入5个字符"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>', {
                        title: '输入点什么吧！',
                        button: {
                            确定: function () {
                                if (this.querySelector('input').value.length >= 5) {
                                    Dialog.init('你输入的内容是：' + this.querySelector('input').value);
                                    Dialog.close(this);
                                } else {
                                    Dialog.init('你输入的内容不符合要求！', 1100);
                                }
                            },
                            关闭: function () {
                                Dialog.close(this);
                            }
                        }
                    });
                })*/
            });
            currentPage++;


        }

        query();//先查询一次,页面才有数据

        //绑定更多回答事件
        $("#moreReply").click(function () {
            //如果是小于总页数就发送请求
            if (currentPage <= pages) {
                query();
            } else {
                $(document).dialog({
                    type: 'notice',
                    content: '<span class="info-text">没有更多的回答了!</span>',
                    autoClose: 1500
                });
            }
        });

    })
</script>
</head>

<body>
<div id="pos38"></div>
<header class="head2home">
    <a href="/" class="logo">
    </a>
    <div class="rBtn">
        <a href="/index.html" class="home">首页</a>
    </div>
</header>
<section class="ans-list a-list">
    <ul class="_j_pager_box">
        <div id="question">
            <li>
                <h2 render-html="title"></h2>
                <div class="clearfix">
                    <div class="rol">
                        <p>
                            <img style="border-radius: 30px" render-src="questionUser.headImgUrl"
                                 width="40px">
                            <span render-html="questionUser.nickName" style="font-size: 15px"></span>&nbsp;
                            问于&nbsp;<span class="time" render-html="questionTime" style="font-size: 13px"></span>
                        </p>
                    </div>
                    <br>
                    <div class="ans-nr">
                        <div class="clearfix">
                            <p render-html="questionContent"></p>
                        </div>
                        <div class="clearfix">
                            <span class="fl-r">
                                            <b render-html="visitCount"></b>浏览
                                            <b render-html="answerCount"></b>回答
                                        </span>
                        </div>
                        <div class="clearfix">
                            <span class="fl-l">
                                    <i class="fa fa-eye followBtn" id="followBtn" render-html="browseNum">
                                    </i>
                            <span id="follow">关注</span>
                                <i class="fa fa-heart-o handleBtn" id="collectionBtn">
                                </i>
                                <span id="collection">收藏</span>
                            </span>
                        </div>
                    </div>
                </div>
            </li>
        </div>
        <div id="reply">
            <li>
                <div render-loop="list">
                    <div class="clearfix">
                        <div class="rol">
                            <p>
                                <img style="border-radius: 30px" render-src="list.replyUser.headImgUrl"
                                     width="40px">
                                <span render-html="list.replyUser.nickName" style="font-size: 15px"></span>&nbsp;
                                答于&nbsp;<span class="time" render-html="list.replyTime" style="font-size: 13px"></span>
                            </p>
                        </div>
                        <br>
                        <div class="ans-nr">
                            <div class="clearfix">
                                <p render-html="list.replyContent"></p>
                            </div>
                        </div>
                        <div>
                            <span class="fl-r">
                            <a render-key="list.id" render-fun="getHref"
                               data-url="/replyCommentPage.html?id=">
                                <i class="fa fa-comments fa-2x" render-html="list.commentCount"></i>
                            </a>
                            </span>
                        </div>
                    </div>
                </div>
            </li>
        </div>
    </ul>
    <div style="margin-bottom: 65px;" id="moreReply">
        <a class="more-list _j_add_more_button">更多回答</a>
    </div>
</section>
<section class="askfoot">
    <a href="/mine/reply.html" class="btn-que replyBtn" data-cs-p="show_publish"><i></i>
        我要回答
    </a>
</section>


</body>

</html>